<script setup lang="ts">
import{computed, reactive, ref}from 'vue'

const xx = reactive<{
    firstname:string,
    lastname:string,
}>({
    firstname:'Voldy',
    lastname:'Lord',
})

let addName = computed(()=>{
    return xx.firstname + "_" + xx.lastname
})
const props = defineProps<{
    age:number
}>()
// const emit = defineEmits(['add','xxxx','100'])

const emit = defineEmits<{
    (e:"add",v:number,v1:string):void
}>()

//slot插槽 默认是default

// 作用域插槽
let ss = ref ([
    {id:100,name:"zs",age:"18"},
    {id:101,name:"ls",age:"18"},
    {id:102,name:"ww",age:"18"},
])
</script>

<template>
    <div id="son">
        <h1>子组件</h1>
        <div>{{ xx.firstname }} ====== {{ xx.lastname }}</div>
        FirstName：<input type="text" v-model="xx.firstname">
        <br>
        LastName：<input type="text" v-model="xx.lastname">
        <br>
        单项绑定的数据：<input type="text" :value="addName">

        <div>{{ addName }}</div>
        <br>此时的年龄：{{ props.age }}<button @click="emit('add',10,'css')">Cilck - add</button>
        <slot :item="item" v-for="item in ss" :key="item.id"></slot>
        <slot name="footer"></slot>
    </div>
</template>

<style scoped>
    #son{
        background-color: cadetblue;
    }
</style>